<template>
	<view class="page_bg" @tap="clear">
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar">
			<view class="top_view"></view>
		</view>
		<!-- #endif -->
		<view class="top_nav">
			<image src="/static/local/3546451940011a031009b939a8b26314.png" class="image_1" @click="pageBack" />
			<view class="cate">详情</view>
		</view>

		<z-paging ref="paging" class="z_pag" v-model="comments" @query="loadComments" v-if="detail" :fixed="false"
			:empty-view-center="false" :empty-view-fixed="false" empty-view-text="- 暂无最新评论 -">
			<view class="posts_detail">
				<view class="flex-row" style="align-items: center;">
					<u-image :src="detail.user.avatar" shape="circle" :lazy-load="true" class="image_5"
						mode="aspectFill"></u-image>
					<view class="flex-col group_3">
						<text class="text_1">{{detail.user.nickname}}</text>
						<text class="text_2">{{detail._add_time_str}}</text>
					</view>
				</view>
				<view class="text">{{detail.content}}</view>
				<view class="images">
					<view class="image_item" v-for="(img,index) in detail.images" @tap="preview(index)">
						<u-image :src="img" :lazy-load="true" class="img" mode="aspectFill">
						</u-image>
					</view>
				</view>
				<view class="top-group justify-end">
					<view v-if="vk.pubfn.isNotNull(detail.tumbup)" @click.stop="giveTumbUp()">
						<u-icon name="thumb-up-fill" size="34" class="image_10"></u-icon>
					</view>
					<view v-else @click.stop="giveTumbUp()">
						<u-icon name="thumb-up" size="34" class="image_10"></u-icon>
					</view>
					<text class="text_13">{{detail.tumbups.length}}</text>
					<u-icon name="chat" size="34" class="image_10"></u-icon>
					<text class="text_13">{{comments.length}}</text>
				</view>
			</view>
			<view class="comments_bg" :class="{no_com_bg: comments.length < 1}">
				<view class="comments_item" v-for="item in comments">
					<u-image :src="item.user.avatar" shape="circle" :lazy-load="true" class="left_avatar"
						mode="aspectFill"></u-image>
					<view class="right_area">
						<view class="name" @tap.stop="sendToHim(item)">
							{{item.user.nickname}}
							<u-icon name="play-right-fill" color="#707070" size="24" class="to"
								v-if="item.talkToId != ''"></u-icon>
							{{item.talkToName}}
						</view>
						<view class="time">{{item._add_time_str}}</view>
						<view class="content">{{item.content}}</view>
					</view>

					<view class="del_btn" v-if="showDel(item)" @tap="delFlag = true;selectId = item._id">删除</view>
				</view>
			</view>
			<view class="empty"></view>
		</z-paging>
		<view class="send_comment" :class="{padding_more: isSendToOther}">
			<view class="send_to" v-if="isSendToOther">回复：{{sendName}}</view>
			<u-input v-model="value" type="textarea" :border="false" class="input" :height="35" :auto-height="true"
				:focus="focus" />
			<u-button size="mini" class="btn" @tap.stop="send">发送</u-button>
		</view>

		<u-toast ref="uToast" />
		<u-modal v-model="delFlag" content="确认删除评论么？" show-cancel-button @confirm="delThis"></u-modal>
	</view>
</template>

<script>
	var that; // 当前页面对象
	var vk; // vk依赖
	export default {
		data() {
			// 页面数据变量
			return {
				detail: null, // 贴子内容
				userInfo: null, // 登录用户信息
				comments: [], // 评论列表
				isSendToOther: false, // 是否回复层主
				sendToId: '', // 回复对象id
				sendName: '', // 回复对象昵称
				value: '', // 发送评论内容
				focus: false, // 获取焦点
				selectId: '',

				delFlag: false
			}
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			that = this;
			vk = that.vk;
			that.init(options)
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {},
		// 函数
		computed: {
			showDel() {
				return (item) => {
					if (this.userInfo == null) return false
					return this.userInfo._id == item.uid || this.userInfo._id == item.posterId
				}
			}
		},
		methods: {
			// 页面数据初始化函数
			init(options) {
				that.getDetail(options)
				that.getUserInfo()
			},
			// 获取帖子信息
			getDetail(options) {
				uni.showLoading({ title: "加载中..." })
				uni.vk.callFunction({
					url: 'client/bbs/pub/squareItemDetail',
					data: { _id: options.id, need_user_info: true },
					success(data) {
						that.detail = data.data
						uni.hideLoading()
					},
					fail() { uni.hideLoading() }
				});
			},
			// 获取用户信息
			getUserInfo() {
				vk.userCenter.getCurrentUserInfo({
					success: function(data) {
						that.userInfo = data.userInfo
					}
				});
			},
			pageBack() {
				uni.navigateBack({ delta: 1 })
			},
			// 获取评论详情
			loadComments(pageNo, pageSize) {
				if (pageNo == 1) this.comments = []
				uni.vk.callFunction({
					url: 'client/bbs/pub/squareItemDetailComments',
					title: '获取评论中...',
					data: {
						aid: that.detail._id, // 贴子ID
						pageNo: pageNo,
						pageSize: pageSize,
					},
					success(data) {
						that.$refs.paging.complete(data.rows);
					}
				});
			},
			// 回复层主
			sendToHim(item) {
				if (item.uid == this.userInfo._id) {
					that.$refs.uToast.show({
						title: '无法回复自己',
						type: 'warning',
						duration: 1000,
					})
					return
				}
				this.sendToId = item.uid
				this.sendName = item.user.nickname
				this.isSendToOther = true
				this.focus = true
			},
			// 发送评论
			send() {
				uni.vk.callFunction({
					url: 'client/bbs/kh/square_add_comments',
					title: '发送中...',
					data: {
						aid: that.detail._id,
						posterId: that.detail.user._id,
						content: that.value,
						talkToId: that.isSendToOther ? that.sendToId : '',
						talkToName: that.isSendToOther ? that.sendName : '',
					},
					success(data) {
						that.$refs.uToast.show({
							title: '回复成功',
							type: 'success',
							duration: 1000,
						})
						that.isSendToOther = false
						that.sendToId = ''
						that.sendName = ''
						that.value = ''
						setTimeout(() => { that.loadComments(1, 10) }, 1000)
					}
				});
			},
			// 修改点赞状态
			giveTumbUp() {
				uni.vk.callFunction({
					url: 'client/bbs/kh/change_bbs_tumbup',
					title: "加载中...",
					data: {
						posts_id: that.detail._id,
						posterId: that.detail.user._id,
						status: vk.pubfn.isNotNull(that.detail.tumbup) ? 1 : 0,
						need_user_info: true
					},
					success(res) {
						if (res.code == 0) {
							that.$refs.uToast.show({
								title: res.msg,
								type: 'success',
								duration: 1000,
							})
							// 暂时性增删
							if (res.noStatus == 0) {
								that.detail.tumbup = {}
								that.detail.tumbups.shift()
								uni.$emit('tumpChange', { status: {}, id: that.detail._id, add: false })
								return
							}
							that.detail.tumbup = { id: 'myid' }
							that.detail.tumbups.push({ id: 'myid' })
							uni.$emit('tumpChange', { status: { id: 'myid' }, id: that.detail._id, add: true })
						}
					}
				})
			},
			// 预览图片
			preview(index) {
				uni.previewImage({
					current: index,
					urls: this.detail.images,
					indicator: 'number',
					loop: true
				});
			},
			// 清除回复对象
			clear() {
				this.isSendToOther = false
				this.sendName = ''
				this.focus = false
			},
			delThis() {
				vk.callFunction({
					url: 'client/bbs/kh/del_talk',
					title: '请求中...',
					data: { id: that.selectId },
					success: function(data) {
						that.loadComments(1, 10)
					}
				});
			}
		},
	}
</script>

<style lang="scss" scoped>
	.page_bg {
		background-color: #ffffff;
		width: 100%;
		height: 100vh;
		overflow-y: auto;
	}

	.top_nav {
		padding-bottom: 24rpx;
		color: rgb(51, 51, 51);
		font-size: 34rpx;
		line-height: 41rpx;
		white-space: nowrap;
		background-color: rgb(255, 255, 255);
		height: 88rpx;
		position: relative;
		box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.1);

		.image_1 {
			left: 21rpx;
			top: 27rpx;
			width: 19rpx;
			height: 35rpx;
			position: absolute;
		}

		.cate {
			width: 100%;
			padding: 20rpx 0;
			color: rgb(51, 51, 51);
			font-size: 34rpx;
			font-weight: 500;
			line-height: 41rpx;
			white-space: nowrap;
			text-align: center;
		}
	}

	.posts_detail {
		padding: 32rpx 20rpx 0;

		.image_5 {
			width: 88rpx !important;
			height: 88rpx !important;
		}

		.group_3 {
			margin-left: 20rpx;
			margin-top: 14rpx;

			.text_1 {
				color: rgb(51, 51, 51);
				font-size: 32rpx;
				line-height: 38rpx;
				white-space: nowrap;
				font-weight: bold;
				font-size: 30rpx;
			}

			.text_2 {
				margin-top: 14rpx;
				color: rgb(153, 153, 153);
				font-size: 24rpx;
				line-height: 29rpx;
				white-space: nowrap;
			}
		}

		.text {
			margin: 24rpx 4rpx 21rpx;
		}

		.top-group {
			color: rgb(51, 51, 51);
			font-size: 24rpx;
			white-space: nowrap;
			padding-bottom: 16rpx;
			display: flex;
			align-items: center;

			.image_10 {
				width: 34rpx;
				height: 34rpx;
				margin: 4rpx 10rpx 4rpx 80rpx;
			}
		}
	}

	.z_pag {
		height: calc(100vh - 234rpx);
	}

	.images {
		display: flex;
		flex-wrap: wrap;
		margin: 20rpx 0;

		.image_item {
			width: 31.1%;
			margin: 1.1%;
			padding-bottom: 31.1%;
			height: 0;
			position: relative;
			border-radius: 8rpx;
			overflow: hidden;

			.img {
				width: 100% !important;
				height: 100% !important;
				position: absolute;
				top: 0;
				left: 0;
			}
		}
	}

	.comments_bg {
		background: #F8F8F8;
		border-radius: 10rpx;
		border-bottom: 90rpx solid #F8F8F8;
		margin: 0 24rpx 20rpx;
		padding: 14rpx 0;

		.no_com {
			color: #919191;
			font-size: 24rpx;
			padding: 30rpx;
		}

		.comments_item {
			display: flex;
			padding: 14rpx 20rpx;
			position: relative;

			.left_avatar {
				width: 56rpx !important;
				height: 56rpx !important;
				margin-top: 10rpx;
			}

			.right_area {
				margin-left: 20rpx;
				font-size: 24rpx;
				flex: 1;

				.name {
					margin-bottom: 5rpx;

					.to {
						transform: scale(0.5);
					}
				}

				.time {
					font-size: 20rpx;
					font-weight: 400;
					color: #999999;
					margin-bottom: 16rpx;
				}

				.content {
					font-weight: 500;
					color: #666666;
				}
			}

			.del_btn {
				color: #fa3534;
				line-height: 40rpx;
				font-size: 24rpx;
				position: absolute;
				top: 20rpx;
				right: 20rpx;
			}
		}
	}

	.no_com_bg {
		border-bottom: 0;
		background-color: #FFFFFF;
		padding: 40rpx 0;
	}

	.no_com {
		text-align: center;
	}

	.send_comment {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		border-top: 1px solid #e5e5e5;
		padding: 20rpx;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		z-index: 999;

		.send_to {
			position: absolute;
			top: 4rpx;
			left: 28rpx;
			z-index: 99;
			font-size: 24rpx;
		}

		.input {
			background-color: #f8f8f8;
			border-radius: 20rpx;
			padding: 6rpx 20rpx !important;
		}

		.btn {
			margin-left: 6%;
		}
	}

	.padding_more {
		padding: 50rpx 20rpx 20rpx;
	}

	/deep/ .zp-l-container {
		margin-top: -80rpx;
	}
</style>
